<script setup lang="ts">
import { showToast } from 'vant';
import { ref } from 'vue'
defineProps<{
  topics: string[]
}>()
const selectTopic = ref('')
const onTopic = (topic: string) => {
  selectTopic.value = topic
}
const inputTxt = ref('')
const onSend = ()=>{
  if (!inputTxt.value.trim()){
    return showToast('请输入')
  }
  console.log(inputTxt.value)
  inputTxt.value = ''
}
</script>

<template>
  <div>
    <div class="top">
      <span class="placehold">大家都在聊</span>
      <span class="topic" v-for="topic in topics" :key="topic" @click="onTopic(topic)"
        :class="{ 'topic-select': topic === selectTopic }">
        {{ topic }}
      </span>
    </div>
    <div class="input">
        <input type="text" placeholder="分享你的故事" class="tf" v-model="inputTxt">
        <span class="iconfont icon-shuaxin icon" @click="onSend"></span>
    </div>
  </div>
  
</template>

<style lang="scss" scoped>
.top {
  padding-top: 3vw;
  display: flex;
  justify-content: flex-start;
  overflow-x: scroll;
  white-space: nowrap;
  column-gap: 4vw;
  background-color: transparent;
}

.placehold {
  margin-left: 4vw;
  color: #666;
  font-size: 3vw;
  line-height: 6vw;
  height: 6vw;
  background-color: transparent;
}

.topic {
  color: #f1f1f1;
  font-size: 3vw;
  line-height: 6vw;
  height: 6vw;
  background-color: #666;
  padding: 0 2vw;
  border-radius: 3vw;
}

.topic-select {
  color: #000;
  background-color: #fff;
}

.input {
  flex: 1;
  margin-top: 3vw;
  background-color: transparent;
  padding-left: 4vw;
  padding-right: 4vw;
  display: flex;
}

.tf {
  background-color: #666;
  height: 10vw;
  flex: 1;
  padding: 0 2vw;
  border-radius: 5vw;
  color: #fff;
  font-size: 4vw;
}

.icon {
  background-color: transparent;
  font-size: 10vw;
  line-height: 10vw;
  color: #fff;
  margin-left: 4vw;
}
</style>